<template>
  <div class="articles">
    <h1>渲染模式:{{ mode }}</h1>
    <h1>最终显示数据：{{ show }}</h1>
    <h1>{{ homeInfo }}</h1>
    <h2>{{ title1 }}</h2>
    <h3>{{ title2 }}</h3>
    <h4>{{ title3 }}</h4>
    <h5>{{ title4 }}</h5>
    <h6>{{ title5 }}</h6>
    <h6>{{ title6 }}</h6>
    <p>
      <router-link to="/">首页</router-link>
      <router-link to="/HelloWorld">HelloWorld</router-link>
      <router-link to="/HelloWorld/HelloWorldDemo">HelloWorldDemo</router-link>
      <router-link to="/HelloWorld/Articles">Articles</router-link>
      <router-link to="/HelloWorld/Header">Header</router-link>
      <router-link to="/#">#</router-link>
    </p>
    <div style="border:4px solid #42b983" >
      <h1>测试嵌套组建</h1>
      <div>
        <v-header />
        <v-articles />
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/HelloWorld/Header'
import Articles from '@/components/HelloWorld/Articles'
export default {
  name: 'articlesView',
  components: {
    'v-header': Header,
    'v-articles': Articles
  },
  data () {
    return {
      mode: process.env.VUE_ENV === 'server' ? '服务端渲染模式' : '客户端渲染模式',
      // show: 'Vue-SSR-Koa&Express中会显示来自*.vue文件中预设的data{}中的数据',
      title1: '首页-Index-面朝大海的博客首页-Index',
      title2: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客',
      title3: '首页-Index-面朝大海的博客首页-Index-面朝大海',
      title4: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客',
      title5: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客',
      title6: '首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客首页-Index-面朝大海的博客'
    }
  },
  serverRequest (store) {
    return store.dispatch('getHomeInfo')
  },
  mounted () {},
  computed: {
    homeInfo () {
      return this.$store.state.homeInfo
    },
    show () {
      return 'Vue-SSR-Koa&Express中会显示show--' + this.$store.state.homeInfo
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
a {
  color: #42b983;
}
</style>
